<template>
  <div class="invitation_box" v-if="dataObj">
    <div class="ib_content">
      <div class="content_item">
        <h3><span>邀请好友注册免费领取会员</span></h3>
        <div class="pmgressbar_box">
          <div class="pb_title" @click="watchList">查看详情</div>
          <h5>已邀请人数<span>（{{dataObj.invitationCount}}人）</span></h5>
          <div class="pb_line_box">
            <div class="pb_line_item" :class="{'actived':dataObj.invitationCount >= 1}">
              <div class="pb_num_item pni_left">0人</div>
              <div class="pb_num_item pni_right">1人</div>
            </div>
            <div class="pb_line_item" :class="{'actived':dataObj.invitationCount >= 2}">
              <div class="pb_num_item">2人</div>
            </div>
            <div class="pb_line_item" :class="{'actived':dataObj.invitationCount >= 3}">
              <div class="pb_num_item">3人</div>
            </div>
            <div class="pb_line_item" :class="{'actived':dataObj.invitationCount >= 4}">
              <div class="pb_num_item">4人</div>
            </div>
          </div>
        </div>
        <div class="invitation_btn tag-read" :data-clipboard-text="pageUrl" v-if="dataObj.status == -1" @click="invitationFn">邀请好友</div>
        <div class="invitation_btn tag-read" :data-clipboard-text="pageUrl" v-if="dataObj.status == 0" @click="invitationFn2">邀请好友</div>
        <div class="invitation_btn end" v-else-if="dataObj.status == 1">您已领取成功</div>
        <div class="invitation_btn timeout" v-else-if="dataObj.status == 2" @click="restartFn">任务超时 重新开始</div>
        <div class="invitation_timer">
          <span>{{this.hour}}</span><i>:</i>
          <span>{{this.minute}}</span><i>:</i>
          <span>{{this.second}}</span>
        </div>
      </div>
      <div class="content_item">
        <h3><span>活动规则</span></h3>
        <div class="text_box">
          <p class="tb_icon">1.邀请好友助力，在3小时内成功邀请到4人助力，即可获得当前会员级别延期30天（SVIP-个人版及以下的会员获得30天SVIP-个人版）；</p>
          <p class="tb_icon">2.助力人点击好友发来的链接助力，注册成功并登录即算作助力完成；</p>
          <p class="tb_icon">3.助力人完成助力后，点击激活可免费获得当前会员级别延期30天（SVIP-个人版及以下的会员获得30天SVIP-个人版），（激活会员：发起自己的助力活动，待所有助力人完成助力后，即可激活会员）；</p>
          <p class="tb_icon">4.获得的会员卡生效规则：</p>
          <p>(1) 如果您当前会员级别低于SVIP-个人版会员，会员卡立即生效，有效期30天；</p>
          <p>(2) 如果您当前会员级别高于/等于SVIP-个人版会员，会员卡在您当前会员权限期限的基础上增加30天；</p>
          <p class="tb_icon">5.每位好友只能助力一次，同一个账户，同一个手机号及同一设备号在本次活动中均视为同一助力用户；</p>
          <p class="tb_icon">6.如发现用户存在作弊行为，则取消用户奖励；</p>
          <p class="tb_icon">7.本次活动最终解释权归掌上精选平台所有；</p>
        </div>
      </div>
    </div>
    <div class="share_mask" v-if="isShowMask" @click="isShowMask = false">
      <div class="sm_box">
        <div class="smb_top"></div>
        <div class="smb_bottom">点击右上角“. . .”按钮开始邀请好友</div>
      </div>
    </div>
    <!-- 扫码领取会员弹框 --> 
    <van-dialog v-model="isShowListDialog" :showConfirmButton="false" :class="'invitation_dialog'">
      <ul v-if="dataObj.invitationMobileList">
        <li v-for="item in dataObj.invitationMobileList" :key="item">用户{{item}}注册成功</li>
      </ul>
      <div class="list_nodata" v-else>
        <i></i>
        <p>暂无数据</p>
      </div>
      <i class="ss_close" @click="isShowListDialog = false"></i>
    </van-dialog>
    <div class="gohome" @click="$router.push('/')"><i></i><span>首页</span></div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
import { wxShare } from '@/common/wxjssdk_toolkit';
export default {
  props: {},
  data() {
    return {
      hour:'03',
      minute:'00',
      second:'00',
      isShowMask:false,
      isShowListDialog:false,
      dataObj:null,
      timer:null,
      onoff:1,  //  防止连点
      pageUrl:location.href,
    };
  },
  computed: {},
  created() {
    this.getWxJssdkSign();
    this.getData();
  },
  mounted() {
  },
  watch: {},
  methods: {
    watchList(){
      this.getData().then(()=>{
        this.isShowListDialog = true;
      });
    },
    copyCode() {
      var clipboard = new Clipboard('.tag-read');
      clipboard.on('success', e => {
        this.$toast({ message: '复制成功，请粘贴给好友吧！', duration: 3000 });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        //   console.log('该浏览器不支持自动复制')
        this.$toast({ message: '复制失败，请手动复制链接', duration: 3000 });
        // 释放内存
        clipboard.destroy();
      });
    },
    restartFn(){
      if(this.onoff){
        this.onoff = 0;
        this.$axios.get("/api/customer/RestartInvitationTask").then((res)=>{
          if(res.data.code == '0'){
            clearInterval(this.timer);
            this.timer = null;
            this.getData();
          }
          this.onoff = 1;
        });
      }
    },
    invitationFn(){
      if(this.$isWX){
        this.isShowMask = true;
      }else{
        this.copyCode();
      }
      this.restartFn();
    },
    invitationFn2(){
      if(this.$isWX){
        this.isShowMask = true;
      }else{
        this.copyCode();
      }
    },
    getData(){
      return new Promise((resolve,reject)=>{
        this.$axios.get("/api/customer/GetInvitationTask").then((res)=>{
          if(res.data.code == '0'){
            this.dataObj = res.data.data;
            this.setTimer(res.data.data.remainingSecond,res.data.data.status);  // "status": 0,//状态 0进行中 1 已完成 2未完成超时
            // this.setTimer(10);
            resolve();
          }
        });
      });
    },
    setTimer(time,status){  //isStop：是否暂停
      if(status == -1) return;  //如果未开始不走定时器；

      this.timer = setInterval(()=>{
        let h = '',m = '',s = '';
        h = Math.floor(time / 3600);
        m = Math.floor((time - (h*3600)) / 60);
        s = Math.floor((time - (h*3600 + m*60)));
        if(h < 10){
          h = '0'+h;
        }
        if(m < 10){
          m = '0'+m;
        }
        if(s < 10){
          s = '0'+s;
        }
        this.hour = h;
        this.minute = m;
        this.second = s;

        if(time<1 && status == 0){
          this.hour = '00';
          this.minute = '00';
          this.second = '00';
          clearInterval(this.timer);
          this.timer = null;
          this.dataObj.status = 2;  //倒计时结束，本地更新到超时状态
        }
        if(status == 1){  //1 已完成,倒计时定格在结束时间
          clearInterval(this.timer);
          this.timer = null;
        }else if(status == 2){  //2 未完成超时，都置为00
          this.hour = '00';
          this.minute = '00';
          this.second = '00';
          clearInterval(this.timer);
          this.timer = null;
        }
        time -= 1;
      },1000);
    },
    getWxJssdkSign(){
      let herfUrl = location.href;
      this.$axios.get("/api/customer/WechatShare",{
        params:{
          url:herfUrl
        }
      }).then((res)=>{
        if(res.data.code == '0'){
          let shareObj = {
            title:'免费领取会员',
            desc:'点击链接注册成功可免费领取会员',
            link:herfUrl,
            // imgUrl: 'https://dy.zsjx114.com/static/img/zsjxSub.d3dedef.png',
            imgUrl: location.origin+'/static/new_logo.png',
          }
          wxShare(res.data.data,shareObj);
        }
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
@import '~@/common/common.styl';
.invitation_box{
  min-height: 100vh;
  box-sizing: border-box;
  padding: rem(740) 0 rem(36);
  background: url('/static/invitation_bg.jpg') no-repeat center top #ff924b;
  background-size: 100% auto;
  color: #222
}
.ib_content{
  padding: 0 rem(33);
}
.content_item{
  border-radius: rem(30)
  background-color: #fff
  padding: rem(46) rem(38)
  margin-bottom: rem(28)
  &:last-child{
    margin-bottom: 0
  }
  h3{
    font-size: rem(32)
    span{
      display: inline-block
      vertical-align: middle
    }
    &:before{
      content: ''
      display: inline-block
      width: rem(6)
      height: rem(32)
      background-color: #fd7f2c
      border-radius: 3px;
      vertical-align: middle
      margin-right: rem(14)
    }
  }
}
.pmgressbar_box{
  position: relative
  margin-top: rem(26)
  padding: rem(32) rem(20) rem(125)
  background-color: #f5f5f5
  border-radius: rem(30)
  .pb_title{
    position absolute
    display: flex
    justify-content: flex-end
    align-items: center
    width: rem(170)
    padding-right: rem(20)
    line-height: rem(58)
    right: 0
    top: 0
    color: #fff
    font-size: rem(26)
    text-align: center
    bgp('~@/assets/img/invitation_title_bg.png')
    &:after{
      content: ''
      display: inline-block
      width: rem(12)
      height: rem(18)
      bgp('~@/assets/img/arrow_s.png')
      margin-left: rem(14)
    }
  }
  h5{
    font-size: rem(26)
    span{
      color: #888
    }
  }
}
.pb_line_box{
  display: flex
  align-items: center
  justify-content: center
  margin-top: rem(45)
  .pb_line_item{
    position: relative
    width: rem(127)
    height: rem(10)
    background-color: #b5b5b5
    border-radius: rem(5)
    font-size: 0
    // &:before{
    //   content: ''
    //   display: inline-block
    //   width: 100%
    //   height: 100%
    //   background-color: #b5b5b5
    //   border-radius: rem(5)
    // }
    &:after{
      content: ''
      position: absolute;
      right: rem(-10)
      top: rem(-9)
      display: inline-block
      width: rem(20)
      height: rem(20)
      background-color: #b5b5b5
      border-radius: 50%
      border: 2px solid #fff
      z-index: 1
    }
    .pb_num_item{
      position: absolute
      font-size: rem(28)
      color: #fff
      width: rem(75)
      line-height: rem(45)
      text-align: center
      border-radius: rem(32)
      background-color: #b5b5b5
      margin-top: rem(40)
      right: rem(-70/2)
      &:after{
        position: absolute
        top: rem(-9)
        left: 50%
        transform: translateX(-50%)
        content: ''
        display: block;
        width: 0px;
        height: 0px;
        border-bottom: rem(12) solid #b5b5b5;
        border-left: rem(10)  solid transparent;
        border-right: rem(10)  solid transparent;
      }
      &.pni_left{
        left: rem(-70/2)
        right: initial;
        background-color: #fd7f2c
        &:after{
          border-bottom-color: #fd7f2c
        }
        // transform: translateX(-50%)
      }
      &.pni_right{
        left: initial;
        right: rem(-70/2)
      }
    }
    &.actived{
      background-color: #fd7f2c
      &:after{
        background-color: #fd7f2c
      }
      .pb_num_item{
        background-color: #fd7f2c
        &:after{
          border-bottom-color: #fd7f2c
        }
      }
    }
  }
}
.invitation_btn{
  line-height: rem(91)
  font-size: rem(30)
  border-radius: rem(18)
  color: #fff
  background-color: #fd7f2c
  text-align: center
  margin-top: rem(30)
  border: 1px solid #fd7f2c
  &.timeout{
    background-color: #fff
    border-color: #fd7f2c
    color: #fd7f2c
  }
  &.end{
    background-color: #b5b5b5
    border-color: #b5b5b5
    color: #fff
  }
}
.invitation_timer{
  display: flex
  justify-content: center
  font-size: 0
  margin-top: rem(39)
  span{
    display: inline-block
    line-height: rem(43)
    width: rem(43)
    font-size: rem(28)
    border-radius: rem(6)
    color: #fff
    background-color: #fd7f2c
    text-align: center
  }
  i{
    font-size: rem(29)
    line-height: rem(41)
    color: #fd7f2c
    font-weight: bold
    font-style: normal
    margin: 0 rem(10)
  }
}
.text_box{
  margin-top: rem(40)
  font-size: rem(28)
  line-height: rem(46)
  color: #888
  text-align: justify
  p{
    margin-bottom: rem(6)
  }
  .tb_icon{
    position: relative
    text-indent: 1em;
    &:before{
      position: absolute
      left: 0
      top: rem(14)
      content: ''
      display: inline-block
      width: rem(14)
      height: rem(17)
      bgp('~@/assets/img/share_sj.png')
    }
  }
}
.share_mask{
  position: fixed
  background-color: rgba(0,0,0,.8)
  width: 100%
  height: 100%
  left: 0
  top: 0
  z-index: 9
  .sm_box{
    position: absolute
    right: rem(51)
    top: rem(30)
    width: rem(600)
    font-size: rem(34)
    color: #fff
    .smb_top{
      position: relative
      height: rem(62)
      border-right: 2px dashed #fff
      &:before{
        position: absolute
        right: -5px
        top:  -5px
        content: ''
        display: inline-block
        width: 8px
        height: 8px
        border-radius: 100%
        background-color: #fff
      }
      &:after{
        position: absolute
        right: -9px
        top: -9px
        content: ''
        display: inline-block
        width: 16px
        height: 16px
        border-radius: 100%
        background-color: #fff
        opacity: .5
      }
    }
    .smb_bottom{
      line-height: rem(80)
      text-align: center
      border-radius: rem(10)
      border: 2px dashed #fff
    }
  }
}
// 被邀请用户注册成功弹框
.invitation_dialog{
  width: rem(600);
  height: rem(580);
  overflow: initial !important;
  background:url('/static/invitation_list_bg.png') no-repeat center center;
  background-size: 100% 100%;
  box-sizing: border-box
  padding-top: rem(222)
  ul{
    width: rem(463)
    height: rem(210)
    padding: rem(20)
    margin: 0 auto
    text-align: center
    color: #fff
    font-size: rem(30)
    overflow: auto
    li{
      line-height: rem(58)
    }
  }
  .list_nodata{
    padding-top: rem(25)
    text-align: center
    i{
      display: inline-block
      width: rem(226)
      height: rem(174)
      bgp('~@/assets/img/invitation_list_nodata.png')
    }
    p{
      margin-top: rem(-25)
      font-size: rem(30)
      color: #fff
    }
  }
  .ss_close{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.4rem;
    display: inline-block;
    width: .64rem;
    height: .64rem;
    background:url('~@/assets/img/give_close.png') no-repeat center center;
    background-size: 100% 100%;
  }
}
.gohome{
  position: fixed;
  right: 0;
  bottom: 16.5%;
  display: flex;
  align-items: center;
  height: rem(64)
  padding: 0 rem(20) 0 rem(24)
  background-color: rgba(255,255,255,.8);
  border-radius: rem(32) 0 0 rem(32);
	box-shadow: 0px 0px rem(32) 0px rgba(219, 87, 32, 0.34);
  z-index: 8
  i{
    display: inline-block
    width: rem(34)
    height: rem(34)
    bgp('~@/assets/two/a-foot_03.png')
    margin-right: rem(10)
  }
  span{
    font-size: rem(30)
    color: #fd7f2c
    letter-spacing: 1px;
  }
}
</style>
